<script lang="ts" setup>
  import fullScreenImg from '@/assets/visual/fullscreen.png'
  import exitFullScreenImg from '@/assets/visual/exit-fullscreen.png'

  const emit = defineEmits<{
    (e: 'update:value', arg: boolean): void
    (e: 'change', arg: boolean): void
  }>()

  const props = defineProps({
    value: Boolean,
  })

  const onSwitch = () => {
    const value = !props.value
    emit('update:value', value)
    emit('change', value)
  }
</script>

<template>
  <div class="fullscreen-action" @click="onSwitch">
    <img :src="value ? exitFullScreenImg : fullScreenImg" />
  </div>
</template>

<style lang="less" scoped>
  .fullscreen-action {
    cursor: pointer;
  }
</style>
